<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-input
          v-model="formInline.user"
          placeholder="请输入关键词"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%"
      border
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="date" label="日期"> </el-table-column>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="日期">
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="ID">
          <el-input v-model="form.id" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="msg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-input__inner {
  width: 220px;
}
</style>

<script>
export default {
  methods: {
    onSubmit() {
      let flag = false;
      this.tableData.map((item) => {
        if (this.formInline.user === item.name) {
          flag = true;
          this.$message({
            type: "success",
            message: "查询成功!" + "id=" + item.id + "姓名=" + item.name,
          });
        }
      });
      if (flag == false) {
        this.$message({
          type: "error",
          message: "查询失败!",
        });
      }
      this.formInline.user = "";
    },
    onAdd() {
      this.dialogFormVisible = true;
      this.title = "新增信息";
    },
    msg() {
      if (this.title == "新增信息") {
        let inputData = {
          date:
            this.value1.getFullYear() +
            "-0" +
            this.value1.getMonth() +
            "-0" +
            this.value1.getDate(),
          id: this.tableData.length + 1,
          name: this.form.name,
          address: this.form.address,
        };
        this.tableData.push(inputData);
        this.$message({
          type: "success",
          message: "新增信息成功!",
        });
      } else if (this.title == "编辑信息") {
        this.tableData[this.form.currentIndex] = {
          date: this.form.date,
          id: this.form.id,
          name: this.form.name,
          address: this.form.address,
        };
        this.$message({
          type: "success",
          message: "编辑信息成功!",
        });
        console.log(this.tableData[this.form.currentIndex]);
      }
      this.value1 = "";
      this.form = {
        date: "",
        id: null,
        name: "",
        address: "",
        currentIndex: null,
      };
      this.dialogFormVisible = false;
    },
    handleEdit(i, row) {
      this.dialogFormVisible = true;
      this.title = "编辑信息";
      this.value1 = row.date;
      this.form = {
        date: this.value1,
        id: row.id,
        name: row.name,
        address: row.address,
        currentIndex: i,
      };
    },
    handleDelete(i, row) {
      this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(i, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      value1: "",
      title: "",
      tableData: [
        {
          date: "2016-05-02",
          id: 1,
          name: "王虎",
          address: "成都市金沙江路 3900",
        },
        {
          date: "2016-05-04",
          id: 2,
          name: "小虎",
          address: "四川省普陀区江路 1220",
        },
        {
          date: "2016-05-01",
          id: 3,
          name: "虎",
          address: "天津市区普陀金沙江路 1578",
        },
        {
          date: "2016-05-03",
          id: 4,
          name: "虎小",
          address: "上海市普陀沙江路 154",
        },
      ],
      formInline: {
        user: "",
      },
      form: {
        date: "",
        id: null,
        name: "",
        address: "",
        currentIndex: null,
      },
    };
  },
};
</script>

<style  lang="scss" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>